<template>
  <div class="">
    <div class="head row">
      <!-- <div class="title">购物车：<i>共2种商品</i></div> -->
      <div class="searchB">
        <el-input
          placeholder="搜索购物车的商品"
          v-model="search"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="findByPage.pageNum"
              :page-sizes="[1, 5, 10, 20]"
              :page-size="findByPage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
    <!-- <div class="main">
      <el-table
        tooltip-effect="dark"
        ref="multipleTable"
        :data="cartBookList"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="" label="封面" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table> -->
      <!-- <myTable></myTable> -->
      <elTable :tableList=bookList @refresh="findAll()"></elTable>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      search: "",
      cartBookList: [
        {
          address: "17栋111",
          issuerName: "商家",
          issuerId: 0,
          bookId: 0,
          bookName: "bookname",
          typeId: "",
          typeName: "",
          publisher: "出版社",
          author: "作者",
          issuer: "商家",
          fPrice: 100, //新书原价
          nPrice: 10, //二手标价
          discount: 9, //折扣
          price: 0,
          depreciation: 9, //折损
          pubDate: "2022-1-1", //出版日期
          createTime: "2022-1-1 12:11:30", //上架日期
          coverPhoto: require("@/assets/imgs/logo.png"), //封面
          isbn: "12234455",
          brief: "简介收到罚单撒发射点发",
          quantity: 10, //库存
          sellNum: 10, //销量
          likeNum: 20, //收藏数
          userId: 0, //顾客
          cartNum: 0,
        },
      ],
      findByPage: {
        userId: "",
        pageNum: 1,
        pageSize: 5,
      },
      bookList: [],
    };
  },
  mounted() {
    this.findByPage.userId = this.$store.state.user.user.userId;
    this.findAll();
  },
  methods: {
    findAll() {
      this.$axios
        .post("sys/cart/getByPage", this.findByPage)
        .then(({ data }) => {
          console.log(data);
          this.bookList = data.bookInfo;
          this.total = data.total;
        });
    },
    handleSizeChange(val) {
      this.findByPage.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      this.findByPage.pageNum = val;
      this.findAll();
    },

    // tableRowClassName({ row, rowIndex }) {
    //   if (rowIndex === 1) {
    //     return "warning-row";
    //   } else if (rowIndex === 3) {
    //     return "success-row";
    //   }
    //   return "";
    // },
    // deleteRow(index, rows) {
    //   rows.splice(index, 1);
    // },
    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach((row) => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection();
    //   }
    // },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },
  },
  components: {
    myTable: () => import("@/components/util/myTable.vue"),
    elTable: () => import("@/components/util/elTable.vue"),
  },
};
</script>

<style lang="less" scoped>
.head {
  margin-top: 30px;
  margin-bottom: 30px;
  .title {
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    margin-right: 40px;
  }
  // .searchB {
  // }
}
</style>